<template>
  <div class="ui-index-body">
    <Row type="flex" justify="center" class="code-row-bg">
      <Col :sm="{span: 12}" :lg="{span: 6}">
        <Row class="ui-switch-list">
          <Col :sm="{span: 24}">
            <Card :bordered="false">
              <p slot="title">今日开关灯时间<span>{{new Date().Format('hh:mm:ss')}}</span></p>
            </Card>
          </Col>
          <Col :sm="{span: 24}">
            <Card :bordered="false">
              <p slot="title">明天开关灯时间<span>{{new Date().Format('hh:mm:ss')}}</span></p>
            </Card>
          </Col>
          <Col :sm="{span: 24}">
            <Card :bordered="false">
              <p slot="title">照明时长 <span>{{new Date().Format('hh小时mm分钟')}}</span></p>
            </Card>
          </Col>
        </Row>
      </Col>
      <Col :sm="{span: 12}"  :lg="{span: 6}">
        <Card :bordered="false">
          <p slot="title">总终端数量 </p>
          <ul class="ui-show-num">
             <li>
               <h1><a>236566</a></h1>
               <p>总终端数量</p>
             </li>
             <li>
               <h1><a>236566</a></h1>
               <p>故障灯数量</p>
             </li> 
          </ul>
        </Card>
      </Col>
      <Col :sm="{span: 12}" :lg="{span: 6}">
        <Card :bordered="false">
          <p slot="title">总路灯数量 </p>
          <ul class="ui-show-num">
             <li>
               <h1><a>236566</a></h1>
               <p>智能单灯数量</p>
             </li>
             <li>
               <h1><a>236566</a></h1>
               <p>故障灯数量</p>
             </li> 
          </ul>
        </Card>
      </Col>
      <Col :sm="{span: 12}" :lg="{span: 6}">
        <Row class="ui-switch-list">
          <Col :sm="{span: 24}">
            <Card :bordered="false">
              <p slot="title">当前开关状态
                <i-switch size="large">
                  <span slot="open">开启</span>
                  <span slot="close">关闭</span>
                </i-switch>
              </p>
            </Card>
          </Col>
          <Col :sm="{span: 24}">
            <Card :bordered="false">
              <p slot="title">终端禁用键
                <i-switch size="large">
                  <span slot="open">开启</span>
                  <span slot="close">关闭</span>
                </i-switch>
              </p>
            </Card>
          </Col>
          <Col :sm="{span: 24}">
            <Card :bordered="false">
              <p slot="title">一键全开(全关)
                <i-switch size="large">
                  <span slot="open">开启</span>
                  <span slot="close">关闭</span>
                </i-switch>
              </p>
            </Card>
          </Col>
        </Row>
      </Col>
    </Row>
    <Row type="flex" justify="center" algin="middle" class="code-row-bg">
      <Col style="padding: 15px;">
        <Table border stripe  :columns="columns" :data="tabData" align="center"></Table>
      </Col>
    </Row>
    <Row type="flex" justify="center" algin="middle" class="code-row-bg">
      <Col style="padding: 15px;">
        <div style="background: white;height: 100%;">
          <div id="work_report-chart" style="height: 100%;;"></div>
        </div>
      </Col>
      <Col style="padding: 15px;">
        <div style="background: white;height: 100%;">
         <h1>地图</h1>
        </div>
      </Col>
    </Row>
  </div>
  
</template>

<script>
import mixin from "@/mixin"
import echarts from 'echarts'
var columns = [
    {
      title: '报警类型',
      render: function(){
        return '数量'
      }
    },
    {
      title: '无信号',
      key: '0'
    },
    {
      title: '电源缺相',
      key: '1'
    },
    {
      title: '异常亮灯',
      key: '2'
    },
    {
      title: '异常灭灯',
      key: '3'
    },
    {
      title: '接触器不动作',
      key: '4'
    },
    {
      title: '过电流',
      key: '5'
    },
    {
      title: '低电流 ',
      key: '6'
    }
    
  ];
export default {
  mixins: [mixin],
  name: 'HelloWorld',
  data () {
    return {
      columns: columns,
      tabData: [{'0': '00','1': '00','2': '00','3': '00','4': '00','5': '00','6': '00'}]
    }
  },
  mounted () {
    this.initChart()
  },
  methods: {
    initChart: function(){
      // 引入 ECharts 主模块
      let _this = this
      this.myChart = echarts.init(document.getElementById('work_report-chart'));
      // 绘制图表
      this.myChart.setOption({
          title: { 
            text: `用电量`
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                  color: '#999'
              }
            }
          },
          toolbox: {
            feature: {
              dataView: {show: true, readOnly: false},
              magicType: {show: true, type: ['line', 'bar']},
              restore: {show: true},
              saveAsImage: {show: true}
            },
            right: 50
          },
          xAxis: {
              type: 'category',
              data: ['前天', '昨天', '今天'],
              axisPointer: {
                type: 'shadow'
              }
          },
          legend: {
            data: ['前天', '昨天', '今天'],
            align: 'left',
            right: 80
          },
          yAxis: [
            {
              type: 'value',
              name: '单位：℃',
              axisLabel: {
                formatter: '{value} ℃'
              }
            }
          ],
          series: [{
            name:'用电量',
            type:'bar',
            barWidth: '60%',
            data:[10, 52, 200]
        }]
      });
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .ui-index-body{
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .code-row-bg > div{
    background: #eee;
    padding: 5px;
  }
  .ui-index-body > div:nth-child(2), .ui-index-body > div:nth-child(3){
    display: flex;
    flex-direction: row;
  }
  .ui-index-body > div:nth-child(3){
    flex: 1;
  }
  .ui-index-body > div:nth-child(2) > .ivu-col, .ui-index-body > div:nth-child(3) > .ivu-col{
    flex: 1;
  }
  .code-row-bg > div .ivu-card{
    margin: 10px;
  }
  .ui-switch-list .ivu-card-head > p{
    height: 25px;
    line-height: 25px;
  }
  .ui-switch-list .ivu-card-head > p >span{
    float: right;
    border-bottom: 0;
    font-weight: normal;
  }
  .ui-show-num{
    overflow: hidden;
  }
  .ui-show-num > li{
    width: 50%;
    float: left;
  }
</style>
<style>
  .ui-switch-list .ivu-card > div:last-child{
    display: none;
  }
  .ui-switch-list .ivu-card  .ivu-card-head{
    padding: 5px 16px;
  }
</style>
